<template>
    <el-dialog :close-on-click-modal="false" :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="130px" label-position="right" v-loading="loading">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="教练" prop="teacherId">
                        <el-select
                        style="width: 100%;"
                        v-model="form.teacherId"
                        filterable
                        clearable
                        placeholder="请选择教练">
                            <el-option
                                v-for="item in teacherList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    emits: ['success', 'closed'],
    props: {
        teacherTitles: { type: Array, default: () => [] }
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增教练',
                edit: '编辑教练',
                show: '查看'
            },
            loading: false,
            visible: false,
            isSaveing: false,
            teacherLoading: false,
            form: this.getDefaultRuleForm(),
            rules: {
                teacherId: [
                    { required: true, message: '请选择教练', trigger: 'change' }
                ]
            },
            teacherList: []
        }
    },
    mounted() {
        this.searchTeacherHander()
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            if (mode == 'add') {
                this.resetForm()
            }
            this.visible = true;
            return this
        },
        resetForm() {
            this.form = this.getDefaultRuleForm()
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }

                let data = {}
				for(let key in this.form) {
					data[key] = this.form[key]
				}

                try {
                    this.isSaveing = true;
                    if (this.form.id) {
                        await this.$API.teacher.salary.action.put(data).then(res => {
                            this.isSaveing = false;
                            if (res.error == 0) {
                                this.visible = false
                                this.$emit('success')
                                this.$notify.success("保存成功")
                            }else {
                                this.$notify.error(res.message)
                            }
                        })
                    }else {
                        await this.$API.teacher.salary.action.post(data).then(res => {
                            this.isSaveing = false;
                            if (res.error == 0) {
                                this.visible = false
                                this.$emit('success')
                                this.$notify.success("保存成功")
                            }else {
                                this.$notify.error(res.message)
                            }
                        })
                    }
                } catch (error) {
                    this.isSaveing = false;
                }
            })
        },
        getDefaultRuleForm() {
            return {
                id: 0,
                teacherId: "",
            }
        },
        searchTeacherHander() {
            this.$API.teacher.listByAgent.get().then((res) => {
                this.teacherList = res.data
            }).finally(() => {
            });
        },
    }
}
</script>

<style lang="scss">
</style>
